<!-- 提现 -->
<template>
	<view class="draw-money-wrap">
		<view class="head-box">
			<u-navbar backIconColor="#fff" :borderBottom="false" :background="{ background: 'none' }"
				:backTextStyle="{ color: '#fff', fontSize: '32rpx' }" :isFixed="false"></u-navbar>
			<view class="wallet-num-box u-flex u-col-center u-row-between">
				<view class="">
					<view class="num-title">支付金额</view>
					<view class="wallet-num">{{ money }}</view>
				</view>
			
			</view>
		</view>
		<view class="draw-card">
			<view class="card-title">支付金额</view>
			<view class="input-box u-flex u-col-center">
				<view calss="unit">￥</view>
				<input class="u-flex-1 u-p-l-10" type="number" v-model="money" :placeholder-style="placeholderStyle"
					placeholder="支付金额"  disabled="true"/>
			</view>

			<button class="u-reset-button save-btn" @tap="recharge">确认支付</button>
		</view>

		<!-- modal -->
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#7063D2"
			cancel-color="#666666" @confirm="$Router.push('/pages/user/wallet/withdraw-log')" confirm-text="查看记录"
			cancel-text="继续提现" content="您的申请提现已提交" title="申请成功"></u-modal>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import FormValidate from '@/shopro/validate/form';
	import wechat from '@/shopro/wechat/wechat';
	import wxsdk from '@/shopro/wechat/sdk'
	export default {
		data() {
			return {
				showModal: false,
				money: '', //提现金额
				formTitle: '',
				showBindForm: false,
				showWithdrawList: false,
				money:'',
				order_id:'',
				// 表单样式
				errorType: ['message'],
				labelStyle: {
					'font-size': '30rpx',
					'font-weight': '500',
					color: '#333'
				},
				placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',

			};
		},
		computed: {
			...mapState({
				userinfo: ({
					user
				}) => user.userInfo
			})
		},
		async onLoad() {
			this.getOrderDetail();
		},
		methods: {
			...mapActions(['showAuthModal']),

			async recharge() {
				if (this.money <= 0) {
					this.$u.toast('请输入支付金额');
					return;
				}
				const res = await this.$http('money.recharge',{ money: this.money ,order_id:this.order_id});
				// uni.navigateTo({url: '/pages/user/wallet/recharge-result?ordersn=' + res.data.ordersn})
				wxsdk.wxpay(res.data, (res) => {
					if (res.errMsg == "chooseWXPay:ok") {
						uni.navigateTo({
							url: '/pages/index/user'
						})
					}
				});
			},
			
			// 支付信息
			getOrderDetail() {
				let that = this;
				that.$http('order.zmddetail', {
					id: that.$Route.query.orderId
				}).then(res => {
					if (res.code === 1) {
						this.money = res.data.agent_fee
						this.order_id = res.data.id
						// console.log();
						// that.orderDetail = res.data;
						// if (res.data.ext_arr !== null) {
						// 	if (res.data.ext_arr.pickgoods_card_id > 0) {
						// 		that.payType = 'delivery_card'
						// 	}
						// 	that.countDown();
						// } else {
						// 	that.isCountDown = false;
						// }
					}
				});
			},

		}
	};
</script>

<style lang="scss">
	.head-box {
		background: url($IMG_URL+'/imgs/user/draw_money_head_bg.png') no-repeat;
		background-size: 100% auto;
		min-height: 400rpx;
		padding-bottom: var(--status-bar-height);

		// 可提现
		.wallet-num-box {
			padding: 20rpx 40rpx 0;

			.num-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #ffffff;
				margin-bottom: 20rpx;
			}

			.wallet-num {
				font-size: 60rpx;
				font-weight: 500;
				color: #ffffff;
			}

			.log-btn {
				width: 170rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: rgba(255, 255, 255, 0.1);
				border: 1rpx solid #eeeeee;
				border-radius: 30rpx;
				padding: 0;
				font-size: 26rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}

	// 提现输入卡片
	.draw-card {
		background-color: #fff;
		border-radius: 20rpx;
		width: 690rpx;
		min-height: 530rpx;
		margin: -70rpx auto 0;
		padding: 30rpx;

		.card-title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.input-box {
			width: 624rpx;
			border-bottom: 1rpx solid #eee;
			height: 100rpx;
			margin-bottom: 40rpx;

			.unit {
				font-size: 48rpx;
				color: #333;
			}
		}

		.bank-box {
			.name {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.bank-list {
				.empty-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}

				.sel-box {
					.item-img {
						width: 36rpx;
						height: 36rpx;
					}

					.item-title {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}

		.bank-info {
			height: 50rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;

			.bank-info-title {
				width: 500rpx;
			}

			.bind-btn {
				padding: 0 20rpx;
				line-height: 50rpx;
				background: #f5f6f8;
				border-radius: 20rpx;
				color: #999;
			}
		}

		.save-btn {
			width: 616rpx;
			height: 86rpx;
			line-height: 86rpx;
			background: linear-gradient(-90deg, #a36fff, #5336ff);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 43rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}

	// 提现说明
	.draw-notice {
		width: 684rpx;
		height: 327rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx 35rpx;
		margin: 20rpx auto;

		.title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.draw-list {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-bottom: 10rpx;
		}
	}

	// 提现费方式
	.withdraw-modal {
		min-height: 600rpx;
		background-color: #fff;

		.modal-head {
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		}

		.modal-content {
			.type-item {
				height: 100rpx;
				border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
				width: 750rpx;

				.item-img {
					width: 36rpx;
					height: 36rpx;
				}

				.item-title {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.modal-bottom {
			padding: 30rpx;

			.modal-save-btn {
				width: 690rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, #a36fff, #5336ff);
				box-shadow: 0 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
				border-radius: 40rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}

	// 绑定
	.form-box {
		.head-title {
			height: 100rpx;
			font-size: 34rpx;
			font-weight: 600;
		}

		.form-save-btn {
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #a36fff, #5336ff);
			box-shadow: 0 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 40rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.form-cancel-btn {
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #999;
			border-radius: 40rpx;
			font-weight: 500;
			color: #999;
		}
	}
</style>
